<!-- 
  %%%%*************************%%%%
  %%                             %%
  %%                             %%
  *                               *
  *                               *
  %%                             %%
  %%                             %%
  %%%%*************************%%%%
 -->
<script setup lang="ts">
import decorationNymoV2Vue from './decoration-nymo-v2.vue';
</script>


<template>
  <div class="decoration-type1">
    <!-- 外侧inset边框 -->
    <div class="border-base"></div>

    <!-- 左上角装饰 -->
    <div class="border-decoration1-left-top"></div>

    <!-- 左下角装饰 -->
    <div class="border-decoration1-left-bottom"></div>

    <!-- 右上角装饰 -->
    <div class="border-decoration1-right-top"></div>

    <!-- 右下角装饰 -->
    <div class="border-decoration1-right-bottom"></div>

    <!-- 内部左上角slot Icon -->
    <div class="icon">
      <slot name="icon"></slot>
    </div>
    <div class="dNymo2">
      <decorationNymoV2Vue></decorationNymoV2Vue>
    </div>
    <div class="decoration-type1-slot-area">
      <slot name="chart"></slot>
    </div>
  </div>
</template>


<style lang="scss" scoped>
@import "styles/mixin.scss";
@import "./common.scss";
@mixin color-transition($keyframes, $duration) {
  animation: $keyframes $duration ease-in-out infinite;
}
@mixin decoration-common {
  position: absolute;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  left: 2.5px;
  top: 2.5px;
}

$headH: 2.5rem;
.decoration-type1 {
  width: 100%;
  height: 100%;
  position: relative;
  .border-base {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    left: 5px;
    top: 5px;
    background: transparent;
    box-shadow: inset 0px 0px 40px rgb(0, 38, 255);
    filter: blur(1px);
    position: absolute;
    border-radius: 7%;
  }

  .border-decoration1-left-top {
    @include decoration-common;
    clip-path: polygon(
      0.5% 10%,
      2% 14%,
      2% 6%,
      4% 3%,
      10% 3%,
      12% 0%,
      3% 0%,
      0.5% 4%
    );
    @include color-transition(colorWhite, 2s);
  }
  .border-decoration1-left-bottom {
    @include decoration-common;
    clip-path: polygon(
      0.5% 90%,
      2% 86%,
      2% 94%,
      4% 97%,
      10% 97%,
      12% 100%,
      3% 100%,
      0.5% 96%
    );
    @include color-transition(colorWhite, 2s);
  }
  .border-decoration1-right-top {
    @include decoration-common;
    clip-path: polygon(
      99.5% 10%,
      98% 14%,
      98% 6%,
      96% 3%,
      90% 3%,
      88% 0%,
      97% 0%,
      99.5% 4%
    );
    @include color-transition(colorWhite, 2s);
  }
  .border-decoration1-right-bottom {
    @include decoration-common;
    clip-path: polygon(
      99.5% 90%,
      98% 86%,
      98% 94%,
      96% 97%,
      90% 97%,
      88% 100%,
      97% 100%,
      99.5% 96%
    );
    @include color-transition(colorWhite, 2s);
  }
  .icon {
    width: 0.8rem;
    height: 0.8rem;
    position: absolute;
    left: 8%;
    top: 10%;
  }
  .dNymo2 {
    width: 1rem;
    height: 0.7rem;
    position: absolute;
    left: calc(8% + 0.8rem + 0.1rem);
    top: calc(10% + 0.1rem);
  }
  .decoration-type1-slot-area {
    position: absolute;
    width: calc(100% - 10%);
    height: calc(100% - 15% - 8%);
    padding-top: 8%;
    left: 5%;
    top: 5%;
  }
}
</style>
